<template>
	<div class="container-box">
		<!-- <commonNavBar
      title="个人中心"
      :isRightIcon="false"
      :isLeftIcon="false"
    ></commonNavBar> -->
		<div class="top_box">
			<div class="head_img">
				<img src="@/assets/img/personal_head_img.png" alt="" />
			</div>
			<div class="top_info">
				<div class="personal_name">{{ userInfos.name }}</div>
				<div class="mechanism_name">{{ userInfos.orgName }}</div>
			</div>

			<div class="person_content_box">
				<div class="content_box_inner">
					<div class="content_item" @click="$router.push('/userInfos')">
						<van-field clickable label="个人资料" readonly center>
							<template #left-icon>
								<span class="personal-data">
									<img src="@/assets/img/personal_data_img.png" alt="" />
								</span>
							</template>
							<template #right-icon>
								<van-icon name="arrow" />
							</template>
						</van-field>
					</div>

					<div class="content_item" @click="$router.push('/changePwd')">
						<van-field clickable label="修改密码" readonly center>
							<template #left-icon>
								<span class="change-pwd">
									<img src="@/assets/img/change_password_img.png" alt="" />
								</span>
							</template>
							<template #right-icon>
								<van-icon name="arrow" />
							</template>
						</van-field>
					</div>

					<div class="content_item" @click="ShowDialog(1)">
						<van-field clickable label="清除缓存" readonly center>
							<template #left-icon>
								<span class="clear-cache">
									<img src="@/assets/img/clear_cache_img.png" alt="" />
								</span>
							</template>
							<template #right-icon>
								<van-icon name="arrow" />
							</template>
						</van-field>
					</div>

					<div class="content_item" @click="ShowPopup">
						<van-field clickable label="版本更新" readonly center>
							<template #left-icon>
								<span class="update-version">
									<img src="@/assets/img/update_version_img.png" alt="" />
								</span>
							</template>
							<template #right-icon>
								<van-icon name="arrow" />
							</template>
						</van-field>
					</div>

					<div class="content_item" @click="$router.push('/about')">
						<van-field clickable label="关于" readonly center>
							<template #left-icon>
								<span class="about">
									<img src="@/assets/img/about_img.png" alt="" />
								</span>
							</template>
							<template #right-icon>
								<van-icon name="arrow" />
							</template>
						</van-field>
					</div>
				</div>

				<div class="content_box_inner">
					<div class="content_item" @click="ShowDialog(2)">
						<van-field clickable label="退出登录" readonly center>
							<template #left-icon>
								<span class="about">
									<img src="@/assets/img/exit.png" alt="" />
								</span>
							</template>
							<template #right-icon>
								<van-icon name="arrow" />
							</template>
						</van-field>
					</div>
				</div>
			</div>
		</div>
		<!-- 清除缓存/退出登录弹窗 -->
		<commonDialog
			:dialogIsShow="showDialog"
			:dialogTitle="dialogTitle"
			confirmButtonColor="#4997fb"
			@cancelDialog="cancel"
			@sureDialog="sure"
		>
			<div class="dialogContent">
				<span v-if="!isExit">将会清除所有的缓存，是否清除？</span>
				<span v-else>是否确认退出？</span>
			</div>
		</commonDialog>
		<!-- 版本更新提示 -->
		<van-popup class="version-popup" v-model="showPopup">
			<span>已经是最新版本</span>
		</van-popup>
	</div>
</template>

<script>
import { get_system_version2 } from '@/api/PGXT.js'
import { mapGetters } from 'vuex'
export default {
	name: 'index',
	data() {
		return {
			dialogTitle: '',
			isExit: false,
			currentVersion: '3.3',
			showDialog: false,
			showPopup: false
		}
	},
	computed: {
		...mapGetters(['userInfos'])
	},
	created() {},
	methods: {
		ShowDialog(val) {
			this.dialogTitle = val == 1 ? '清除缓存' : '退出登录'
			this.isExit = val == 1 ? false : true
			this.showDialog = true
		},
		cancel() {
			this.showDialog = false
		},
		sure() {
			window.sessionStorage.clear()
			this.showDialog = false
			this.$store.dispatch('user/logout')
			this.$router.push('/')
		},
		ShowPopup() {
			const that = this
			// let versionType;
			// if (/iOS/i.test(navigator.platform)) {
			//   versionType = "IOS";
			// } else {
			//   versionType = "安卓";
			// }

			get_system_version2().then((res) => {
				if (res.succeed) {
					if (res.data && res.data.version != this.currentVersion) {
						this.$dialog
							.confirm({
								title: '提示',
								message: `线上最新版本为${res.data.version},是否更新？`
							})
							.then(() => {
								window.location.href = res.data.downLoadUrl
							})
							.catch(() => {
								// on cancel
							})
					} else {
						// this.showPopup = true;
						// setTimeout(function () {
						//   that.showPopup = false;
						// }, 1500);
						this.$toast.fail('已经是最新版本')
					}
				}
			})
		}
	}
}
</script>

<style lang="less" scoped>
.container-box {
	position: relative;
	// background-color: #fff;
	height: 100vh;
	.top_box {
		position: relative;
		display: flex;
		// width: 1200px;
		height: 440px;
		padding-top: 40px;
		background: url('../../assets/img/personal_bg_img.png') no-repeat;
		background-size: 1200px 100%;

		.head_img {
			width: 145px;
			height: 144px;
			margin: 63px 38px 0 43px;
			border-radius: 50%;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.top_info {
			width: 60%;
			height: 144px;
			color: #fff;
			margin-top: 63px;
			text-align: left;

			.personal_name {
				font-size: 38px;
				margin: 22px 0 20px;
			}

			.mechanism_name {
				font-size: 26px;
			}
		}

		.person_content_box {
			position: absolute;
			top: 316px;
			left: 50%;
			transform: translateX(-50%);
			width: 90%;
			overflow: hidden;

			border-radius: 10px;
			padding: 20px 0;
			.content_box_inner {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 100%;
				border-radius: 10px;
				background-color: #fff;
				&:nth-child(2) {
					margin-top: 20px;
				}
				.content_item {
					margin: 5px 0;
					border-radius: 10px;
					/deep/.van-cell {
						font-size: 30px;
						width: 90%;
						border-radius: 10px 10px 0 0;
						border-bottom: 2px solid #f7f8fa;
						padding: 0.26667rem 0;
						margin: 0 auto;
					}
					&:last-child {
						border-bottom: none;
						/deep/.van-cell {
							border-bottom: none;
						}
					}

					.personal-data {
						display: inline-block;
						width: 30px;
						height: 33px;

						img {
							width: 100%;
							height: 100%;
							vertical-align: sub;
						}
					}

					.change-pwd {
						display: inline-block;
						width: 30px;
						height: 33px;

						img {
							width: 100%;
							height: 100%;
							vertical-align: sub;
						}
					}

					.clear-cache {
						display: inline-block;
						width: 30px;
						height: 33px;

						img {
							width: 100%;
							height: 100%;
							vertical-align: sub;
						}
					}

					.update-version {
						display: inline-block;
						width: 33px;
						height: 30px;

						img {
							width: 100%;
							height: 100%;
							vertical-align: sub;
						}
					}

					.about {
						display: inline-block;
						width: 33px;
						height: 33px;

						img {
							width: 100%;
							height: 100%;
							vertical-align: sub;
						}
					}

					.row-icon {
						display: inline-block;
						width: 20px;
						height: 25px;

						img {
							width: 100%;
							height: 100%;
							// vertical-align: sub;
						}
					}
				}
			}
		}
	}

	.dialogContent {
		text-align: center;
		span {
			color: #2c3e50;
			font-size: 30px;
			font-weight: 500;
		}
	}

	.version-popup {
		width: 230px;
		line-height: 50px;
		background-color: #fff;
		border-radius: 10px;
		text-align: center;
		font-size: 34px;

		span {
			font-size: 32px;
		}
	}

	/deep/.van-dialog__header {
		font-size: 34px;
	}

	/deep/.van-dialog__confirm,
	/deep/.van-dialog__cancel {
		font-size: 34px;
	}
	/deep/ .van-nav-bar {
		background-color: #fff;
	}
}
</style>
